<template>
  <div class="loadingbar-demo">
    <h3 class="title">基本</h3>
    <div>
      <d-button color="primary" @click="start">开始</d-button>
      <d-button color="green" @click="success">成功</d-button>
      <d-button color="red" @click="fail">失败</d-button>
    </div>
    <h3 class="title">VueRouter 示例</h3>
    <pre>
      import VueRouter from 'vue-router';
      import doorui from 'door-ui';

      const routerParam = {};
      const router = new VueRouter(routerParam);
      router.beforeEach((to, from, next) => {
        doorui.$LoadingBar.start();
        next();
      });
      router.afterEach(() => {
        doorui.$LoadingBar.success();
      });
    </pre>
  </div>
</template>

<script>
export default {
  name: 'loadingBarDemo',
  data () {
    return {}
  },
  methods: {
    start () {
      this.$LoadingBar.start()
    },
    success () {
      this.$LoadingBar.success()
    },
    fail () {
      this.$LoadingBar.fail()
    }
  }
}
</script>

<style lang="stylus" scoped>
// .switch-demo
</style>
